<!--
 * @Description  : 首页 另一种布局
 * @Author       : zhao
 * @Date         : 2022-07-11 09:35:25
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-30 14:43:04
-->

<template>
	<div class="home-container">
		<el-row :gutter="15">
			<el-col :span="8" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="title">
				<el-card class="home_title" shadow="never">
					<div>
						<span>{{ home_title }}</span>
					</div>
					<div style="font-size: 16px; color: #6b7687">
						提交订单量<span style="color: red; font-size: 22px">{{ home_reserveNum.value.AllNumber
						}}</span>条，待审核订单
						<span style="color: red; font-size: 22px">{{ home_reserveNum.value.ApprovalPending }}</span>
						条,待领取资料订单<span style="color: red; font-size: 22px">{{ home_reserveNum.value.Approval
						}}</span>条
					</div>
				</el-card>
			</el-col>

			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
				<el-card shadow="never">
					<div class="home-card-item">
						<div style="height: 100%" ref="homePieRefOne"></div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="home-media">
				<el-card shadow="never">
					<div class="home-card-item">
						<div style="height: 100%" ref="homePieReftwo"></div>

					</div>
				</el-card>
			</el-col>

			<el-col :span="8" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="FastEntrance ">
				<el-card shadow="never">
					<div class="entrance_title">
						<span style="font-size: 20px">快捷入口</span>
					</div>
					<div class="entrance_content">
						<div class="entrance_content_box">
							<el-card shadow="hover" class="cursor" @click="$router.push('/Borrow')">
								<div class="entrance_icon">
									<i class="icon-jinridaiban iconfont"></i>
								</div>
								<p>借阅单管理</p>
							</el-card>
						</div>
						<div class="entrance_content_box">
							<el-card shadow="hover" class="cursor" @click="$router.push('/Publicity')">
								<div class="entrance_icon">
									<i class="icon-fuwenbenkuang iconfont"></i>
								</div>
								<p>公告</p>
							</el-card>
						</div>
						<div class="entrance_content_box">
							<el-card shadow="hover" class="cursor" @click="$router.push('/SummaryStatistic')">
								<div class="entrance_icon">
									<i class="icon-shuju iconfont"></i>
								</div>
								<p>数据汇总与统计</p>
							</el-card>
						</div>
						<div class="entrance_content_box">
							<el-card shadow="hover" class="cursor" @click="$router.push('/UpdataAndMaintain')">
								<div class="entrance_icon">
									<i class="fa-database fa"></i>
								</div>
								<p>数据更新与维护</p>
							</el-card>
						</div>
						<div class="entrance_content_box">
							<el-card shadow="hover" class="cursor" @click="$router.push('/system/webUser')">
								<div class="entrance_icon">
									<i class="iconfont icon-xitongshezhi"></i>
								</div>
								<p>用户管理</p>
							</el-card>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>


	</div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useChart } from '/@/stores/chart';
import NoticeBar from '/@/components/noticeBar/index.vue';
import zpublic from '/@/utils/public.ts';

const { getHomeProBrowsingNumberSA, getHomeProBrowsingCategorySA, getHomeProBrowsingDistirctSA } = useChart();
let home_title = ref('');
const setHomeTitle = () => {
	let date = new Date();
	let hours = date.getHours();
	if (hours >= 0 && hours <= 10) home_title.value = '早上好！欢迎登录河北省地质资料档案管理系统';
	if (hours > 10 && hours <= 14) home_title.value = '中午好！欢迎登录河北省地质资料档案管理系统';
	if (hours > 14 && hours <= 18) home_title.value = '下午好！欢迎登录河北省地质资料档案管理系统';
	if (hours > 18 && hours <= 24) home_title.value = '晚上好！欢迎登录河北省地质资料档案管理系统';

	return home_title;
};
setHomeTitle();

let home_reserveNum = reactive<any>({
	value: {}
});

//echarts图
const homePieRefOne = ref();
const homePieReftwo = ref();

const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
let global: any = {
	pieChartOne: null, //饼状图
	pieChartTwo: null, //饼状图
	dispose: [null, '', undefined],
};
const state = reactive({
	homeOne: [
		{
			num1: '125,12',
			num2: '-12.32',
			num3: '订单统计信息',
			num4: 'fa fa-meetup',
			color1: '#FF6462',
			color2: '--next-color-primary-lighter',
			color3: '--el-color-primary',
		},
		{
			num1: '653,33',
			num2: '+42.32',
			num3: '月度计划信息',
			num4: 'iconfont icon-ditu',
			color1: '#6690F9',
			color2: '--next-color-success-lighter',
			color3: '--el-color-success',
		},
		{
			num1: '125,65',
			num2: '+17.32',
			num3: '年度计划信息',
			num4: 'iconfont icon-zaosheng',
			color1: '#6690F9',
			color2: '--next-color-warning-lighter',
			color3: '--el-color-warning',
		},
		{
			num1: '520,43',
			num2: '-10.01',
			num3: '访问统计信息',
			num4: 'fa fa-github-alt',
			color1: '#FF6462',
			color2: '--next-color-danger-lighter',
			color3: '--el-color-danger',
		},
	],
	homeData1: [],
	homeData2: [],
	myCharts: [],
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},

});
const colorList = zpublic.chartColor
// 饼图
const initPieChart = (data: any) => {
	if (!global.dispose.some((b: any) => b === global.pieChartOne)) global.pieChartOne.dispose();
	global.pieChartOne = <any>echarts.init(homePieRefOne.value, state.charts.theme);

	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '资料类别',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		tooltip: {
			trigger: 'item', formatter: (val: any) => {
				let a = 0
				let b: any = 0
				data.map((e: any) => { a += e.value })

				b = ((val.data.value / a) * 100).toFixed(2)
				let text = "类别：" + val.name + "<br />" + "档案数：" + val.data.value + "<br/>" + "占比：" + b + "%"
				return text
			}
		},
		graphic: {
			elements: [
				{
					type: 'image',
					z: -1,
					style: {
						image: themeConfig.value.isIsDark
							? ''
							: '',
						width: 230,
						height: 230,
					},
					left: '16.5%',
					top: 'center',
				},
			],
		},
		legend: {
			type: 'scroll',
			orient: 'vertical',
			right: '0%',
			left: '65%',
			top: 'center',
			itemWidth: 14,
			itemHeight: 14,
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 200,
						height: 35,
						padding: [0, 0, 0, 60],
						color: state.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 0, 30],
						color: state.charts.color,
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
				center: ['32%', '50%'],
				itemStyle: {
					color: function (params: any) {
						return colorList[params.dataIndex];
					},
				},
				label: { show: false },
				labelLine: { show: false },

			},
		],
		dataset: {
			// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
			// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
			dimensions: ["key", "value"],

			source: data,
		},
	};
	(<any>global.pieChartOne).setOption(option);
	(<any>state.myCharts).push(global.pieChartOne);
};
// 饼图
const initPieChartTwo = (data: any) => {
	if (!global.dispose.some((b: any) => b === global.pieChartTwo)) global.pieChartTwo.dispose();
	global.pieChartTwo = <any>echarts.init(homePieReftwo.value, state.charts.theme);

	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '当前订单量',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		tooltip: {
			trigger: 'item',
			formatter: (val: any) => {

				let text = "类别：" + val.name + "<br />" + "订单量：" + val.data.value
				return text
			}
		},
		xAxis: {
			type: 'category',
		},
		yAxis: {
			type: 'value'
		},
		// graphic: {
		// 	elements: [
		// 		{
		// 			type: 'image',
		// 			z: -1,
		// 			style: {
		// 				image: themeConfig.value.isIsDark
		// 					? ''
		// 					: '',
		// 				width: 230,
		// 				height: 230,
		// 			},
		// 			left: '16.5%',
		// 			top: 'center',
		// 		},
		// 	],
		// },
		// legend: {
		// 	type: 'scroll',
		// 	orient: 'vertical',
		// 	right: '0%',
		// 	left: '65%',
		// 	top: 'center',
		// 	itemWidth: 14,
		// 	itemHeight: 14,

		// 	textStyle: {
		// 		rich: {
		// 			name: {
		// 				fontSize: 14,
		// 				fontWeight: 400,
		// 				width: 200,
		// 				height: 35,
		// 				padding: [0, 0, 0, 60],
		// 				color: state.charts.color,
		// 			},
		// 			rate: {
		// 				fontSize: 15,
		// 				fontWeight: 500,
		// 				height: 35,
		// 				width: 40,
		// 				padding: [0, 0, 0, 30],
		// 				color: state.charts.color,
		// 			},
		// 		},
		// 	},
		// },
		series: [
			{
				type: 'bar',
				barWidth: 60,//柱图宽度
				// radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
				// center: ['32%', '50%'],
				// itemStyle: {
				// 	color: function (params: any) {
				// 		return colorList[params.dataIndex];
				// 	},
				// },
				// label: { show: false },
				// labelLine: { show: false },

			},
		],
		dataset: {
			// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
			// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射。
			dimensions: ["key", "value"],

			source: data,
		},
	};
	(<any>global.pieChartTwo).setOption(option);
	(<any>state.myCharts).push(global.pieChartTwo);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			setTimeout(() => {
				(<any>state.myCharts[i]).resize();
			}, i * 1000);
		}
	});
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
	initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {
		initEchartsResizeFun();
	}
);
// 监听 vuex 中是否开启深色主题
watch(
	() => themeConfig.value.isIsDark,
	(isIsDark) => {
		nextTick(() => {
			state.charts.theme = isIsDark ? 'dark' : '';
			state.charts.bgColor = isIsDark ? 'transparent' : '';
			state.charts.color = isIsDark ? '#dadada' : '#303133';
			onSubmit()
		});
	},
	{
		deep: true,
		immediate: true,
	}
);

const onSubmit = () => {

	getHomeProBrowsingNumberSA().then((res: any) => {
		home_reserveNum.value = res.data
		state.homeData1 = res.data
		let sdata = [
			{
				key: '待审核',
				value: res.data.ApprovalPending,
			},
			{
				key: '待领取',
				value: res.data.Approval,
			},
		]
		initPieChartTwo(sdata);

	})
	getHomeProBrowsingCategorySA().then((res: any) => {
		state.homeData2 = res.data
		initPieChart(res.data);

	})
	// getHomeProBrowsingDistirctSA().then((res: any) => {

	// 	initPieChartTwo(res.data);

	// })

}



</script>
<style lang='scss' scoped>
.home-container {
	overflow: hidden;

	.el-card {
		margin: 10px;
		// padding: 26px 30px;

		// ::v-deep .el-card__body {
		// 	padding: 20px;
		// }
	}

	.home_title {
		div {
			padding-bottom: 20px;
		}

		font-size: 22px;
		color: #343844;
	}

	.entrance_title {
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.entrance_content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		box-sizing: border-box;
	}

	.entrance_content_box {
		.el-card {
			border: none;
			width: 160px;
			padding: 0;

			p {
				text-align: center;
			}
		}

		.entrance_icon {
			width: 50px;
			height: 50px !important;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}

		&:nth-child(1) {
			.entrance_icon {
				background-color: rgba(255, 156, 110, 0.3);

				i {
					color: rgb(255, 156, 110);
					font-size: 24px;
				}
			}
		}

		&:nth-child(2) {
			.entrance_icon {
				background-color: rgba(105, 192, 255, 0.3);

				i {
					color: rgb(105, 192, 255);
					font-size: 24px;
				}
			}
		}

		&:nth-child(3) {
			.entrance_icon {
				background-color: rgba(179, 127, 235, 0.3);

				i {
					color: rgb(179, 127, 235);
					font-size: 24px;
				}
			}
		}

		&:nth-child(4) {
			.entrance_icon {
				background-color: rgba(255, 214, 102, 0.3);

				i {
					color: rgb(255, 214, 102);
					font-size: 24px;
				}
			}
		}

		&:nth-child(5) {
			.entrance_icon {
				background-color: #90d7ec;

				i {
					color: #009ad6;
					font-size: 24px;
				}
			}
		}
	}

	.home-card-item {
		height: 300px;
		width: 100%;
		overflow: hidden;
		background: white;
	}
}

// .FastEntrance {
// 	height: 27vh;
// }
</style>